<template>
  <ul
    :class="isChild ? 'vxe-table--context-menu-clild-wrapper' : 'vxe-context-menu--option-wrapper'"
  >
    <li
      v-for="(item, idex) in list"
      :key="idex"
      class="vxe-context-menu--link menu-item"
      :style="{
        opacity: item.disabled ? 0.5 : 1,
        cursor: item.disabled ? 'not-allowed' : 'inherit',
        pointerEvents: item.divied ? 'none' : 'inherit',
      }"
      :class="item.className"
      @click.stop="emit('OptionClick', { ...item, clickCode: (childName ?? '') + item.code })"
    >
      <div class="list-line" v-if="!item.divied">
        <i class="iconfont" :class="item.prefixIcon">&nbsp;</i>
        <slot v-if="item.slot" :name="item.slot" :item="{ ...item, emit: emit }"></slot>
        <span class="" v-else-if="!item.disabled">
          <span class="vxe-context-menu--link-content">{{ item.name }}</span>
          <i
            v-if="item.children?.length > 0"
            class="vxe-context-menu--link-suffix suffix--haschild"
          ></i>
          <MenuOptions
            v-if="item.children?.length > 0"
            :isChild="true"
            :childName="item.code"
            :list="item.children"
            @OptionClick="(param: any) => emit('OptionClick', param)"
          ></MenuOptions>
        </span>
      </div>
      <div class="divied-line" v-else></div>
    </li>
  </ul>
</template>

<script lang="ts" setup>
const props = defineProps(['isChild', 'list', 'childName']);
const emit = defineEmits(['OptionClick']);
defineExpose({
  name: 'MenuOptions',
});
</script>
<style lang="less">
.vxe-context-menu--link:hover {
  .list-line {
    background-color: rgba(0, 0, 0, 0.06);
    // border-color: rgba(49, 150, 154, 0.1);
    color: #4e6469;
  }
  .vxe-table--context-menu-clild-wrapper {
    display: block;
    // padding-left: 8px;
    padding: 0px 4px;
  }
}
</style>
<style>
.list-line {
  display: flex;
  width:100%;
  margin: 0 4px;
}
.divied-line {
  height: 1px;
  width: 100%;
  background-color: #d9d9d9;
  pointer-events: none;
}
.v-contextmenu-item {
  width: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0px;
  padding-bottom: 0px;
}
.v-contextmenu-item--hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: #4e6469 !important;
}
</style>
<style lang="less" scoped>
ul {
  // padding: 0px 4px;
  box-sizing: border-box;
  // padding: 0px;
  border: none;
}
.menu-item {
  display: flex;
  align-items: center;
  line-height: 32px;
  padding: 0px;

  /* 主色/二级75% */
  color: #4e6469;
  span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 思源黑体;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0em;
    color: #666;
  }
  i {
    width: 16px;
    margin: 0 8px 0px 4px;
  }
}

.colorpicer {
  font-family: 思源黑体;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0em;

  /* 主色/二级75% */
  color: #4e6469;
  .colortitle {
    line-height: 32px;
  }
  .colorWrap {
    display: flex;
    flex-wrap: wrap;
  }
  .colorItem {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    opacity: 1;

    background: #4eac5b;

    box-sizing: border-box;
    border: 0.5px solid #d9d9d9;
    margin-right: 6px;
    margin-bottom: 4px;
  }
}
</style>
